<template>
	<view v-if="tabbar.index > -1" class="custom-tab-bar safe-area-inset-bottom" :style="[{height: tabbar.height + 'px'}]">
		<block v-for="(item, index) in tabbar.list" :key="index">
			<slot :name="`tabbar-${index}`">
				<view class="tab-bar-item" @click="switchTab(item, index)">
					<div style="height: 60%;" class="center">
						<div class="center" :style="[index === middleIndex ? getMiddleStyle() : {}]">
							<image v-if="getItemValue(item, index, 1)" :src="getItemValue(item, index, 1)" :style="[{width: imgIconSize + 'px',  height: imgIconSize + 'px'}]" mode=""></image>
							<uni-icons v-else-if="getItemValue(item, index, 2)" custom-prefix="iconfont" :type="`icon-` + getItemValue(item, index, 2)" :size="imgIconSize" :color="getItemValue(item, index, 4)"></uni-icons>
						</div>
					</div>
					<text :style="[{height: '40%', fontSize: textSize + 'px', color: getItemValue(item, index, 5)}]">{{getItemValue(item, index, 3)}}</text>
				</view>
			</slot>
		</block>
	</view>
</template>

<script>
	
	import base from '@/components/index.vue'
	
	/**
	 * 高度默认50
	 * 顶部图片图标占60%
	 * 底部文字占40%
	 */
	
	export default {
		extends: base,
		props: {
			/**
			 * 当处于中间项时，需要特殊操作：
			 * 直接变为新增按钮，点击会判断条件然后新增
			 */
			middleIndex: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				tabbar: {}
			}
		},
		computed: {
			imgIconSize() { // 图片图标的大小：21
				return this.tabbar.height * 0.6 * 0.7
			},
			textSize() { // 文字的大小：10
				return this.tabbar.height * 0.4 * 0.5
			},
			normalColor() {
				return this.core.theme.color.tab_normal
			},
			activeColor() {
				return this.core.theme.color.tab_active
			}
		},
		mounted() {
			this.tabbar = this.core.info.tabbar
		},
		methods: {
			/**
			 * 获取菜单项的图片图标标题
			 * @param {Object} item 当前菜单项
			 * @param {Number} index 当前第几项
			 * @param {Number} type 1，图片；2，图标；3，标题；4：图标颜色；5：标题颜色
			 */
			getItemValue(item, index, type) {
				const {tabbar, middleIndex, activeColor, normalColor} = this
				const isActive = index === tabbar.index
				if (type === 4) { // 图标中的颜色
					if (index === middleIndex) {
						return 'white'
					}
				}
				var prefix = type === 1 ? 'image' : type === 2 ? 'icon' : type === 3 ? 'title' : 'color', // 图片图标标题颜色
					suffix1 = isActive ? '_active' : '_normal', // 优先使用哪个
					suffix2 = isActive ? '_normal' : '_active' // 延后使用哪个
				var res = item[prefix + suffix1] || item[prefix + suffix2] || item[prefix]
				if (!res && type > 3) {
					res = isActive ? activeColor : normalColor
				}
				return res
			},
			
			/**
			 * 获取中间突出部分的样式
			 * 默认是全部的高度
			 */
			getMiddleStyle() {
				const {tabbar, activeColor} = this
				return {
					width: tabbar.height + 'px',
					height: tabbar.height + 'px',
					marginTop: tabbar.height * -0.4 + 'px',
					borderRadius: '50%',
					backgroundColor: activeColor,
					display: 'flex',
					justifyContent: 'center',
					alignItems: 'center',
					boxShadow: `0 4px 10px rgba(0, 122, 255, 0.4)`
				}
			},
			
			// 切换菜单项
			switchTab(item, index) {
				this.core.router.to(item.routerKey, {}, 4)
				this.tabbar.index = index
			}
		},
	}
</script>

<style>
	.custom-tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 50px;
		background-color: #ffffff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
		z-index: 999;
	}

	.tab-bar-item {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 100%;
		text-decoration: none;
	}
</style>